<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文章类型</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <style>
        .popover{
            max-width: 2000px;
        }
        .button {
            display: inline-block;
            border-radius: 4px;
            background-color: #f4511e;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 15px;
            padding: 6px;
            width: 68px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
            vertical-align:middle;
        }
        .button span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        .button span:after {
            content: '»';
            position: absolute;
            opacity: 0; top: 0; right: -20px;
            transition: 0.5s;
        }
        .button:hover span {
                     padding-right: 25px;
        }
        .button:hover span:after {
                     opacity: 1; right: 0;
        }



        .button1 {
            display: inline-block;
            border-radius: 4px;
            background-color: #11e3cf;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 15px;
            padding: 6px;
            width: 100px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
            vertical-align:middle;
        }
        .button1 span {
            cursor: pointer;
            display: inline-block;
            position: relative;
            transition: 0.5s;
        }
        .button1 span:after {
            content: '»';
            position: absolute;
            opacity: 0; top: 0; right: -20px;
            transition: 0.5s;
        }
        .button1:hover span {
            padding-right: 25px;
        }
        .button1:hover span:after {
            opacity: 1; right: 0;
        }
        .btn-file > input {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            font-size: 23px;
            cursor: pointer;
            filter: alpha(opacity=0);
            opacity: 0;

            direction: ltr;
        }

        .fileinput .thumbnail > img {
            max-height: 100%;
        }



        .fileinput.input-group > * {
            position: relative;
            z-index: 2;
        }


        .row {
            margin-bottom: 30px;
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .form-group {
            margin-bottom: 30px;
        }

        .submit {
            margin-left: 30px;
        }

        .modal-btns {
            text-align: center;
        }

        .checkbox {
            position: relative;
            height: 30px;
        }
        .checkbox input[type='checkbox'] {
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            opacity: 0;
        }
        .checkbox label {
            position: absolute;
            left: 30px;
            top: 0;
            height: 20px;
            line-height: 20px;
        }
        .checkbox label:before {
            content: '';
            position: absolute;
            left: -30px;
            top: 0;
            width: 20px;
            height: 20px;
            border: 1px solid #ddd;
            border-radius: 50%;
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
        }

        .checkbox label:after {
            content: '';
            position: absolute;
            left: -22px;
            top: 3px;
            width: 6px;
            height: 12px;
            border: 0;
            border-right: 1px solid #fff;
            border-bottom: 1px solid #fff;
            background: #fff;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transition: all 0.3s ease;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
        }

        .checkbox input[type='checkbox']:checked + label:before {
            background: #4cd764;
            border-color: #4cd764;
        }
        .checkbox input[type='checkbox']:checked + label:after {
            background: #4cd764;
        }
    </style>

</head>


<body>

<div class="row">
    <div>
        <ol class="breadcrumb">
            <li><a href="${pageContext.request.contextPath}/main/gomain" class="btn btn-primary btn-sm"
                   role="button"><span class="glyphicon glyphicon-home pull-right" aria-hidden="true"></span>&nbsp;&nbsp;
                主&nbsp;&nbsp; 页</a></li>
            <li class="active">角色管理</li>
            <li class="active">角色管理</li>
        </ol>
    </div>
</div>

<div class="container">



    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>角色管理 —— 显示所有角色</small>&nbsp;&nbsp;&nbsp;&nbsp;
                </h1>

            </div>

        </div>
    </div>

    <br>


<%--    //sssss--%>
    <div class="row">
        <div class="col-md-4"> <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info" id="addButton">
                <span class="glyphicon glyphicon-plus"></span>新增角色
            </button>&nbsp;&nbsp;
            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success" id="batch_delete">
                <span class="glyphicon glyphicon-trash"></span>批量删除
            </button>&nbsp;&nbsp;
            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info" onclick="a1()">
                <span class="glyphicon glyphicon-repeat"></span>刷新
            </button>
        </div>
    </div>

    <br>




    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered">
                <thead>
                <tr class="success">
                    <th><input type="checkbox" id="main-type-id" style="zoom:150%;"/></th>
                    <th>角色名称</th>
                    <th>角色介绍</th>
                    <th>角色状态</th>
                    <th>所属用户</th>
                    <th>操&nbsp;&nbsp;&nbsp;&nbsp;作</th>
                </tr>
                </thead>

                <tbody>
                <c:forEach var="role" items="${roles}">
                    <c:if test="${role.roleId!='werrewew'}">
                        <tr>
                            <td>
                                <input class="one" type="checkbox" value="${role.roleId}" typeName="${role.roleName}" name="ids" style="zoom:150%;">
                            </td>
                            <td>${role.roleName}</td>
                            <td>${role.roleDesc}</td>
                            <td>${role.roleState==1?"可用":"不可用"}</td>
                            <td><c:forEach var="user" items="${role.users}">
                                ${user.userName}<br>
                            </c:forEach> </td>
                            <td>
                                <!-- Indicates caution should be taken with this action -->
                                <a href="#" type="button" class="btn btn-warning" data-toggle="popover" roleId="${role.roleId}">所属用户</a>

                                <a href="#"  type="button" class="button1"  roleId="${role.roleId}" ><span>修改功能</span></a>
                                <br/>
                                <br/>
                                <!-- Indicates a successful or positive action -->
                                <a href="${pageContext.request.contextPath}/role/findByRole/${role.roleId}" type="button" class="btn btn-success">编辑</a>
                                    <%--                            &nbsp;href="${pageContext.request.contextPath}/role/deleteRole/${role.roleId}"--%>
                                <!-- Indicates a dangerous or potentially negative action -->
                                <button  type="button" class="button"  roleId="${role.roleId}" userSize="${role.users.size()}"><span>删除</span></button>

                            </td>
                        </tr>
                    </c:if>

                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>



</div>
<script>
    $(".button").each(function(){
        let roleId=$(this).attr("roleId")
        $(this).click(function (){
            if($(this).attr("userSize")>0){
                alert("该角色属下有用户，请先删除用户")
            }else {
                window.location.href="${pageContext.request.contextPath}/role/deleteRole/"+roleId;
            }
        })

    })
    let a1=function (){
        window.location.href="${pageContext.request.contextPath}/role/findAll"
    }
    $("#batch_delete").click(function(){
        let ones=$(".one:checked")
        if(ones.length===0){
            alert("请选择要删除的项！")
        }else{
            let arr_id=[];
            let articleName=[]
            $.each(ones,function(i,n){
                arr_id.push($(n).val())
                articleName.push($(n).attr("typeName"))
                console.log($(n).val())
                console.log(arr_id)
                console.log(articleName)
            })
            if(confirm("是否删除角色名为【"+articleName.join(",")+"】的记录？")){
                console.log("提交到后台的gid为："+arr_id.join(","))
                $.ajax({
                    url:"${pageContext.request.contextPath}/role/deleteSelectedRole",
                    type:"post",
                    data:{"ids":arr_id.join(",")},
                    success:function (msg){
                        alert(msg);
                        a1();
                    }
                })
            }
        }

    })

    $("#main-type-id").on("click",function(){
        $(".one").prop("checked",$(this).prop("checked"))
    })


    $("table").on("click",".one",function(){
        $("#main-type-id").prop("checked",$(".one").length===$(".one:checked").length)
    })

    $("#addButton").click(function (){
        window.location.href="${pageContext.request.contextPath}/role/findByRole/add"
    })


    $("[data-toggle='popover']").each(function() {
        let element = $(this);
        let roleId=$(this).attr("roleId")
        element.popover({
            trigger: 'manual',
            html: true,
            title: '所属用户',
            placement: 'bottom',
            content: function() {
                return content(roleId);
            }
        }).on("mouseenter", function() {
            let _this = this;
            $(this).popover("show");
            $(this).siblings(".popover").on("mouseleave", function() {
                $(_this).popover('hide');
            });
        }).on("mouseleave", function() {
            let _this = this;
            setTimeout(function() {
                if(!$(".popover:hover").length) {
                    $(_this).popover("hide")
                }
            }, 100);
        });

    });


    //模拟动态加载内容(真实情况可能会跟后台进行ajax交互)
    function  content(roleId)  {
        let data;
        $.ajax({
            url: "${pageContext.request.contextPath}/role/findByUser",
            type: "post",
            data:{"roleId":roleId},
            dataType:"json",
            success:function (users){
                $.each(users,function (i,user){
                    console.log(user)
                    let $tr=$("<tr>");
                    $("<td>").text(user.userTrueName).appendTo($tr)
                    $("<td>").text(user.userName).appendTo($tr)
                    $("<td>").text(user.userSex).appendTo($tr)
                    $("<td>").text(user.userPhone).appendTo($tr)
                    $tr.appendTo($("#msgTable tbody"))
                })
            }
        })

        data  =  $(
            '<table class="table table-bordered" id="msgTable" style="width: 400px"> '+
            '<thead>'+
            '<tr class="info">'+
            '<th style="width: 50px">姓名</th>'+
            "<th style='width: 50px'>账号</th>"+
            "<th style='width: 50px'>性别</th>"+
            "<th style='width: 50px'>电话</th>"+
            '</tr>'+
            '</thead>'+
            '<tbody>'+
            '</tbody>'+
            '</table>'+
            '<a href="${pageContext.request.contextPath}/user/findUserAll?role=role&roleId='+roleId+'" type="button" class="btn btn-success"  >'+
            ' <span class="glyphicon glyphicon-search"></span>查看详细' +
            '</a>'
        )
        return  data;
    }
    //模拟悬浮框里面的按钮点击操作
    function  test()  {
        const msg = "确定眺转到用户管理页面?\n\n请确认！";
        if(confirm(msg)===false){
            a1()
        }

    }




    $(".button1").each(function() {
        let element = $(this);
        let roleId=$(this).attr("roleId")
        element.popover({
            trigger: 'click',
            html: true,
            title: '请选择您需要的功能',
            placement: 'bottom',
            content: function() {
                return content2(roleId);

            }
        })

    });


    //动态加载内容(跟后台进行ajax交互)
    function  content2(roleId)  {
        let data;
        $.ajax({
            url: "${pageContext.request.contextPath}/role/findFunAll",
            type: "post",
            dataType:"json",
            success:function (fun){
                $.each(fun,function (pr_i,pr_fun){
                    console.log(pr_fun.childrenFunction)
                    if(pr_fun.childrenFunction.length>0 && pr_fun.fatherFunctionState!==0){
                        let $div1=$("<div class='form-group'>");
                        $("<label class='col-lg-4 control-label'>").text(pr_fun.fatherFunctionName).appendTo($div1)
                        let $div2= $("<div class='col-lg-8' data-toggle='"+pr_fun.fatherFunctionID+"' id='"+pr_fun.fatherFunctionID+"'>");
                        $div2.appendTo($div1)
                        $.each(pr_fun.childrenFunction,function (i,ch_fun){
                            if(ch_fun.funState!==0){
                                console.log(pr_fun.fatherFunctionID)
                                let $div=$("<div class='checkbox'>");
                                $("<input type='checkbox' name='functionId' class='one' data-toggle='"+ch_fun.funId+"'  value='"+ch_fun.funId+"' id='functionId"+pr_i+"_"+i+"'>").appendTo($div)
                                $("<label>").attr("for","functionId"+pr_i+"_"+i+"").text(ch_fun.funName).appendTo($div)
                                $div.appendTo($div2)
                            }
                        })
                        $div1.appendTo($("#funAll"))
                    }

                })

                $("[data-toggle='updateFun']").click(function (){
                    console.log($(this).attr("date"));
                    let ones=$(".one:checked")
                    let arr_id=[];
                    if(ones.length===0) {
                        alert("角色不能为空！")
                    }else {
                        $.each(ones,function(i,n){
                            arr_id.push($(n).val())
                        })
                        $.ajax({
                            url:"${pageContext.request.contextPath}/role/updateFun",
                            type:"post",
                            data:{"functionId":arr_id.join(","),"roleId":$(this).attr("date")},
                            cache:false,
                            async:false,
                            success:function (flag){
                                alert(flag)
                                window.location.href="${pageContext.request.contextPath}/role/findAll"

                            }
                        })
                    }
                })

                $.ajax({
                    url: "${pageContext.request.contextPath}/role/findRoleFunId",
                    type: "post",
                    dataType:"json",
                    data:{"roleId":roleId},
                    success:function (roleFuns){
                        $.each(roleFuns,function (i,roleFun){
                            let functionId=roleFun.functionId
                            $("[data-toggle='"+functionId+"']").prop("checked",true);
                        })
                    }
                })

            }
        })

        data=$(
            '<form action="#" method="get" id="roleForm" style="width: 400px;">'+
            '<div id="funAll"></div>'+
            '<button type="button" data-toggle="updateFun" class="btn btn-success" id="s1" date="'+roleId+'"  >'+
            ' <span class="glyphicon glyphicon-paste"></span>提交' +
            '</button>&nbsp;&nbsp;&nbsp;&nbsp;'+
            '<button type="button" class="btn btn-info" id="s1"   onclick="a1()">'+
            ' <span class="glyphicon glyphicon-remove"></span>取消' +
            '</button>'+
            '</form>'
        )

        return data

    }









</script>
</body>
</html>

